<template>
	<view class="bookManagement">
		<el-card class="box-card">
			<view slot="header" class="clearfix">
				<span>书籍管理</span>
				<view style="display: flex;align-items: center;">
					<lz-row-col>
						<el-input v-model="seach.keyword" placeholder="请输入小说名" :size="size"
							@keyup.enter.native="dialogSeach"></el-input>
					</lz-row-col>
					<lz-row-col style="margin-left: 20rpx;">
						<el-button icon="el-icon-plus" type="primary" :size="size" @click="addBooklist">添加
						</el-button>
					</lz-row-col>
					
				</view>
			</view>
			<view class="b-center">
				<el-card class="b-center-card" v-for="(item,index) in bookList" :key="index">
					<view class="b-center-content">
						<view class="b-c-left">
							<image :src="item.bookImageSrc" class="image"></image>
						</view>
						<view class="b-c-center">
							<view class="title">
								{{item.bookName}}
								<el-tag class="tag" type="danger" :size="size">{{item.bookTypeTxt}}</el-tag>
								<el-rate :value="item.score" :max="5" disabled show-score text-color="#ff9900" score-template="{value}分">
								</el-rate>
							</view>
							<view class="Synopsis">
								{{item.bookSynopsis}}
							</view>
							<view class="Chapter">
								<el-link type="success" icon="el-icon-circle-check">{{item.lastChapter||'暂无章节内容'}}</el-link>
								<el-link type="primary" icon="el-icon-user-solid">{{item.bookAuthor}}</el-link> 
							</view>
							<view class="Chapter">
								<el-link type="danger" icon="el-icon-time">{{item.lastUpdate}}</el-link>
							</view>
						</view>
						<view class="b-c-right">
							<!-- 1代表上架，0代表下架 -->
							<el-switch v-model="item.isOnShelf" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" @change="changeOnShelf($event,item)"></el-switch>
							<view class="r-btn">
								<view class="r-btn-item" v-if="userInfo.username==item.userName"><el-button type="text" icon="el-icon-edit" :size="size" @click="onShelfChapter(item)">上架章节</el-button></view>
								<view class="r-btn-item"><el-button type="text" icon="el-icon-edit" :size="size" @click="editBook(item)">编辑</el-button></view>
								<view class="r-btn-item"><el-button type="text" icon="el-icon-delete" :size="size" style="color: #ff4949;" @click="deleteBook(item)">删除</el-button></view>
								<view class="r-btn-item" v-if="item.cheerioUrl"><el-button type="text" icon="el-icon-delete" :size="size" style="color: #ffaa00;" @click="crawlingOneBook(item)">爬取当前小说</el-button></view>
								
							</view>
						</view>
					</view>
				</el-card>
				<el-empty description="暂无数据" v-if="bookList.length==0"  style="margin: auto;"></el-empty>
				<!-- //分页 -->
				<el-pagination style="float: right;margin-top: 10px;" class="lz-el-pagination"
					@current-change="handleCurrentChange" @size-change="dialoghandleSizeChange"
					:current-page="page.pageNum" :page-sizes="[10,20,30]" :page-size="page.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="page.total">
				</el-pagination>
			</view>
		</el-card>
		<!-- 小说编辑和添加 -->
		<book-edit ref="bookedit" @submit="submitbookEdit"></book-edit>
	</view>
</template>

<script>
	let that
	import {
		mapState
	} from 'vuex'
	import bookEdit from './components/bookEdit.vue'
	export default {
		components:{
			bookEdit
		},
		computed: {
			...mapState('ui', ['size']),
			...mapState('user', ['userInfo'])
		},
		data() {
			return {
				// 小说编辑和添加
				editOrAdd:{
					type:'add',//默认添加
				},
				//搜索
				seach: {
					keyword: ''
				},
				//分页
				page: {
					pageNum: 1, //当前页数
					pageSize: 10, //默认一页展示10条
					total: 0, //总条数
					bookType: ''
				},
				//列表
				bookList: [],
				isOnShelf:true,//是否上架
			}
		},
		onReady() {
			that = this
			//获取小说列表
			that.getBookList()
		},
		methods: {
			//上架章节
			onShelfChapter(item){
				uni.navigateTo({url: '../chapterManagement/chapterManagement?data='+encodeURIComponent(JSON.stringify(item))});
			},
			//编辑小说
			editBook(item){
				this.editOrAdd.type='edit'
				this.$refs.bookedit.show(true)
				this.$nextTick(function(){
					that.$refs.bookedit.edit(item)
				})
			},
			//删除小说
			deleteBook(item){
				uni.showModal({
					title: '提示',
					content: '你正在执行删除小说操作，是否继续',
					cancelText: '取消',
					confirmText: '立即删除',
					success: res => {
						if(res.confirm){
							//删除书籍
							let req = {
								params: {
									bookId:item._id
								},
								showLoad: true,
								active: 'delectBook'
							}
							uni.$lizhao.doCloud('set-books-cloud', req).then(res => {
								if (res.code == 0) {
									this.$message.success('删除成功')
									//获取小说列表
									that.getBookList()
								}
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			crawlingOneBook(item){
				//删除书籍
				let req = {
					params: {
						cheerioUrl:item.cheerioUrl
					},
					showLoad: true,
					active: 'crawlingOneBook'
				}
				uni.$lizhao.doCloud('reptiles-book', req).then(res => {
					if (res.code == 0) {
						
					}
				})
			},
			//提交
			submitbookEdit(data){
				if(this.editOrAdd.type=='add'){
					console.log('添加',data);
					//添加书籍
					let req = {
						params: data,
						showLoad: true,
						active: 'addBook'
					}
					uni.$lizhao.doCloud('set-books-cloud', req).then(res => {
						if (res.code == 0) {
							this.$message.success('添加成功')
							this.cancelbookEdit()
							//获取小说列表
							that.getBookList()
						}
					})
				}else if(this.editOrAdd.type=='edit'){
					console.log('编辑',data);
					//添加书籍
					let req = {
						params: data,
						showLoad: true,
						active: 'editBook'
					}
					uni.$lizhao.doCloud('set-books-cloud', req).then(res => {
						if (res.code == 0) {
							this.$message.success('编辑成功')
							this.cancelbookEdit()
							//获取小说列表
							that.getBookList()
						}
					})
				}
			},
			//取消
			cancelbookEdit(){
				this.$refs.bookedit.show(false)
			},
			//添加书籍
			addBooklist(){
				this.$refs.bookedit.show(true)
				this.editOrAdd.type='add'
				this.$nextTick(function(){
					that.$refs.bookedit.format()
				})
			},
			//搜索小说
			dialogSeach(){
				this.page.pageNum=1
				//获取小说列表
				that.getBookList()
			},
			//是否上架 1代表上架，0代表下架
			changeOnShelf(onoff,item){
				console.log(onoff,item);
				if(onoff==0){
					uni.showModal({
						title: '提示',
						content: '你是否下架此小说？',
						cancelText: '取消',
						confirmText: '立即下架',
						success: res => {
							if(res.confirm){
								item.isOnShelf=onoff
							}else{
								item.isOnShelf=1
							}
						}
					});
				}
				
			},
			//获取小说数据
			getBookList(page) {
				let req = {
					params: {
						keyword: that.seach.keyword,
						pageSize: that.page.pageSize,
						pageNum: that.page.pageNum,
						bookType: that.page.bookType
					},
					showLoad: true,
					active: 'seachBook'
				}
				uni.$lizhao.doCloud('get-books', req).then(res => {
					console.log(res);
					if (res.code == 0) {
						that.bookList = res.data.map(item=>{
							if(!item.isOnShelf){//如果数据库没有此字段，默认是上架的
								item.isOnShelf=1
							}
							return item
						})
						that.page.total = res.total
					} else {
						that.bookList = []
						that.page.total = 0
					}
				})
			},
			//分页
			handleCurrentChange(val) {
				that.page.pageNum = val
				//获取小说列表
				that.getBookList()
			},
			dialoghandleSizeChange(val){
				that.page.pageSize = val
				//获取小说列表
				that.getBookList()
			}
		}
	}
</script>
<style lang="scss" scoped>
	.bookManagement {
		.clearfix{
			display: flex;justify-content: space-between;align-items: center;height: 50rpx;
		}
		.b-center {
			.b-center-card {
				margin-bottom: 20rpx;
				.b-center-content {
					display: flex;align-items: center;
					.b-c-left {
						background: url(../../../static/images/bookImage/zhuishu.png) 100% 100% no-repeat;
						min-width: 200rpx;
						height: 300rpx;
						.image {
							width: 100%;
							height: 100%;
							box-shadow: #a4a6ad 2px 2px 4rpx 4rpx;
							border-radius: 8rpx;
						}
					}
					.b-c-center {
						font-weight: bold;flex: 1;
						padding: 20rpx 36rpx;
						.title {
							display: flex;
							.tag {
								margin: 0 20rpx;
							}
						}
						.Synopsis{
							font-size: 24rpx;color: #777;font-weight: normal;margin:20rpx 0;
						}
						.Chapter{
							margin-top:20rpx;
							.el-link{
								font-size: 24rpx;margin-right: 20rpx;
							}
						}
					}
					.b-c-right{
						width: 100px;display: flex;flex-direction: column; align-items: flex-end;justify-content: space-between;min-height: 300rpx;
						.r-btn{
							display: flex;max-width: 200px;display: flex;justify-content: space-between;
							.r-btn-item{
								margin-right: 20rpx;
							}
						}
					}
				}

			}
		}
	}
</style>
